
.fade-enter-active, .fade-leave-active {
    transition: all .5s;
}

.fade-enter, .fade-leave-to {
    opacity: 0;
}

.slide-up-leave-active,
.slide-up-enter-active {
    transition: all 640ms cubic-bezier(0.23, 1, 0.32, 1);
}

.slide-up-leave-to,
.slide-up-enter {
    transform: translate(-50%, 50vh);
}


.slide-up-y-leave-active,
.slide-up-y-enter-active {
    transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 200ms ease-in-out;
}

.slide-up-y-leave-to,
.slide-up-y-enter {
    opacity: 0;
    transform: translateY(100%);
}

.slide-up-y-enter-to,
.slide-up-y-leave {
    opacity: 1;
    transform: none;
}


.scale-in-leave-to,
.scale-in-enter {
    transform: scale(.2);
    opacity: 0;
}


.scale-in-enter-active {
    transition: transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 500ms ease-in-out;
}

.scale-in-leave-active {
    transition: transform 500ms ease-in-out, opacity 300ms ease-in-out;

}


/**
 * ==============================================
 * Dot Pulse
 * ==============================================
 */
.dot-pulse {
    //position: absolute;
    //top: 50%;
    //left: 50%;
    position: relative;
    left: -9999px;
    //transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
    box-shadow: 9999px 0 0 -5px #9880ff;
    -webkit-animation: dot-pulse 1.5s infinite linear;
    animation: dot-pulse 1.5s infinite linear;
    -webkit-animation-delay: .25s;
    animation-delay: .25s;
}

.dot-pulse::before, .dot-pulse::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #9880ff;
    color: #9880ff;
}

.dot-pulse::before {
    box-shadow: 9984px 0 0 -5px #9880ff;
    -webkit-animation: dot-pulse-before 1.5s infinite linear;
    animation: dot-pulse-before 1.5s infinite linear;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.dot-pulse::after {
    box-shadow: 10014px 0 0 -5px #9880ff;
    -webkit-animation: dot-pulse-after 1.5s infinite linear;
    animation: dot-pulse-after 1.5s infinite linear;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}

